﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title>会议看板</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../css/bootstrap-table.css"/>
    <link rel="stylesheet" href="../css/bootstrap-table-fixed-columns.css"/>
    <script src="../js/jquery-1.11.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/bootstrap-table.js"></script>
    <script src="../js/bootstrap-table-fixed-columns.js"></script>
</head>
<style>
    .bg {
        background:url("../images/bg.jpg") no-repeat center;
        background-size: cover;
    }
    /*.table {table-layout:fixed;}*/
</style>
<script type="text/javascript">
    $(function () {
        $('#table').bootstrapTable({
            method: 'get',
            url: '/api/weaMeetPanelWebApi/getMeetInfo',
           // url: 'data.json',
            cache: true, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
            striped: true,  //表格显示条纹，默认为false
            async: false,
            rowStyle: rowStyle,//通过自定义函数设置行样式
            columns: [{
                field: 'index',
                title: '序号',
                align: 'center', // 居中显示
                width: 20,
            }, {
                field: 'name',
                title: '议程名称',
                align: 'center', // 居中显示
                width: 600,
            }, {
                field: 'depart',
                title: '责任部门',
                align: 'center', // 居中显示
                width: 400,
            }, {
                field: 'reportmembers',
                title: '汇报人',
                align: 'center', // 居中显示
                width: 200,
            }, {
                field: 'hrmmembers',
                title: '列席人员',
                align: 'center', // 居中显示
                width: 400,
                formatter: function (value, row, index) {
                    let str = value.split(',');
                    if(str.length>=3){
                        var newvalue=str[0]+","+str[1]+","+str[2]+"...";
                        return newvalue;
                    }else {
                        return value;
                    }
                }
            }, {
                field: 'times',
                title: '预计时长',
                align: 'center', // 居中显示
                valign: 'middle', // 上下居中
                width: 100,
            }, {
                field: 'status',
                title: '当前状态',
                align: 'center', // 居中显示
                valign: 'middle', // 上下居中
                width: 100,
            },]
        });
    })

    function rowStyle(row, index) {
        if (index === 0) {
            return {css:{"background-color":'rgba(205,92,92,0.3)'}};
            //return {classes: 'danger'};
        } else if (index === 1) {
            return {css:{"background-color":'rgba(0,255,0,0.3)'}};
            //return {classes: 'success'};
        } else {
            return {css:{"background-color":'rgba(192,192,192,0.3)'}};
            //return {classes: 'active'};
        }
        return {};
    }

    function getTime() {
        var date = new Date();
        var year = date.getFullYear(); //获取年份
        var month = date.getMonth() + 1; //获取月份
        var day = date.getDate(); //获取日期
        var hour = date.getHours(); //获取小时
        hour = hour < 10 ? '0' + hour : hour;
        var minute = date.getMinutes(); // 获取分
        minute = minute < 10 ? '0' + minute : minute;
        var seconds = date.getSeconds(); //获取秒
        seconds = seconds < 10 ? '0' + seconds : seconds;
        return year + '年' + month + '月' + day + '日&nbsp;' + hour + ':' + minute + ':' + seconds;
    }

    self.setInterval(() => {
        self.setTimeout(() => {
            document.querySelector('.time').innerHTML = getTime();
            $.ajax({
                async: false,
                url: '/api/weaMeetPanelWebApi/getDatetime',
                type: "GET",
                dataType: "json",
                success: function (data) {
                    if(data.datetime===data.operatetime){
                        reLoad();
                        autoPlay();
                    }
                }, error: function (e) {
                }
            });
        }, 0)
    }, 1000)

    //刷新（重新加载数据）
    function reLoad() {
        $("#table").bootstrapTable('refreshOptions', {pageNumber: 1});  // pageNumber:1, 指定页码

    }

    //判断是否需求刷新
    function getDatetime() {
        var datetime = '';
        $.ajax({
            async: false,
            url: '/api/weaMeetPanelWebApi/getDatetime',
            type: "GET",
            dataType: "json",
            success: function (data) {
                datetime = data.datetime;
            }, error: function (e) {
            }
        });
        return datetime;
    }
    //自动播放音频
    function autoPlay() {
        var myAuto = document.getElementById('audio');
        if (myAuto.paused) { //判读是否播放
            myAuto.paused=false;
            myAuto.play(); //没有就播放
        }
    }
</script>
<body>
<div class="jumbotron bg" style="height: 712px">
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8 text-info">
                <h2 class="time"></h2>
            </div>
            <div class="col-sm-4 col-sm-offset-4">
                <audio id="audio" hidden style="width: 100px;">
                    <source src="../video/demo.mp3">当前浏览器不支持audio显示的内容
                </audio>
            </div>
        </div>
        <div style="width: max-content;margin-left: -115px">
            <table id="table" style="width: 100%; font-size: 30px" class="text-info"></table>
        </div>
    </div>
</div>
</body>
</html>